<template>
	<div>
        <div v-if="collectList.length == 0"  class="reminder">
          <img src="../assets/空列表@3x.png" alt="">
          <p>您还未参加过任何活动，赶紧去看下有哪些活动吧</p>
          <mt-button @click="submit" class="main-bgc" type="default">浏览活动</mt-button>
          </div>
        <ul v-if="collectList.length != 0" class="mui-table-view" v-for="(item,index) in collectList" :key="index">
            <div class="state">
                <span class="people" >{{item.mechanismName}}</span>
                <span class="momney" style="color:#00d8c9" v-if="item.activityStatus==0">众筹成功</span>
                <span class="momney" style="color:#f93a3a" v-else-if="item.activityStatus==3">众筹失败</span>
                <span class="momney" style="color:#ff9100" v-else>众筹中</span>

            </div>
            <li class="mui-table-view-cell mui-media" @click="userChiplsMessage(item.activityId)">
                <a href="javascript:">
                    <img class="mui-media-object mui-pull-left" :src="item.activityImage">
                    <div class="mui-media-body">
                        <span class="text1" v-html="item.activityName || '<div style=font-size:0.24rem;>暂未填写内容哦</div>'"></span>
                       <div>
                          <span class='mui-ellipsis'>￥{{item.money}}</span>
                          <span class="date">已众筹: {{item.activityMoney}}元</span>
                       </div>
                    </div>
                </a>
            </li>
        </ul>
	</div>
</template>
<script>
export default {
    data() {
        return {
            collectList: [],
            name: '我的众筹'
        }
    },

    created() {
        document.title = this.name
        this.utils.$get(
            this.utils.GET_USER_CHIPS,
            data => {
                this.collectList = data.data
            },
            { crowdType: 1, identity: this.$route.params.identity }
        )
    },
    methods: {
        userChiplsMessage(id) {
            this.$router.push({
                path:
                    '/users/chipl_message/' +
                    this.$route.params.identity +
                    ',' +
                    id
            })
        },
        submit() {
            this.$router.push({ path:'/home/chips_list' })
        }
    }
}
</script>


<style lang="less">
.reminder {
    height: 100%;
    text-align: center;
    > img {
        height: 100%;
        width: 4rem;
        height: 3.5rem;
        margin: 0 auto;
    }
    > p {
        text-align: center;
        font-size: 0.25rem;
        color: #333333;
        margin-top: 0.3rem;
    }
    .main-bgc {
        background-color: #00d8c9;
        margin-top: 0.3rem;
        width: 73%;
        color: #ffffff;
        border-radius: 1rem;
        letter-spacing: 0.02rem;
    }
}
.mui-table-view {
    .state {
        width: 100%;
        height: 0.8rem;
        border-bottom: 1px solid lightgrey;
        .people {
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 0.28rem;
            color: #333333;
            width: 4rem;
            padding-left: 0.2rem;
            line-height: 0.8rem;
        }
        .momney {
            font-size: 0.24rem;
            color: #f93a3a;
            float: right;
            padding-right: 0.2rem;
            line-height: 0.8rem;
        }
    }
    .mui-table-view-cell {
        width: 100%;
        height: 100%;
        padding: 0.15rem !important;
        // height: 2.22rem;
        > a {
          height: 100%;
          display: block;
            .mui-media-object.mui-pull-left {
                width: 2.4rem !important;
                height: 1.6rem !important;
                vertical-align: middle;
                max-width: 2.4rem !important;
            }
            .mui-media-body {
                margin-left: 0.2rem;
                padding: 0.1rem 0;
                position: relative;
                height: 1.6rem;
                > div {
                  position: absolute;
                  bottom: 0.1rem;
                  left: 0;
                  width: 100%;
                    .mui-ellipsis {
                        font-size: 0.32rem;
                        color: #f93a3a;
                    }
                    .date {
                        font-size: 0.28rem;
                        color: #999999;
                        float: right;
                        padding-right: 0.2rem;
                    }
                }
                .text1 {
                    line-height: 0.4rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: normal !important;
                }
            }
        }
    }
}
</style>
